<template>
    <!-- 菜单图片 -->
    <div class="content-list">
        <ul class="section-content">
            <li
                class="content-item"
                v-for="(item, index) in contentList"
                :key="index"
            >
                <div class="menu-container">
                    <!-- 正面的内容 -->
                    <div class="menu-image">
                        <!-- <div class="menu-image" v-show="false"> -->
                        <div
                            class="background-wrapper"
                            :style="{
                                background: `url(${item.pic}) center no-repeat`,
                                'background-size': 'cover',
                            }"
                        ></div>
                        <div class="text-wrapper">
                            <h2>{{ item.name }}</h2>
                        </div>
                    </div>
                    <!-- 反面的内容 -->
                    <div class="inner-container">
                        <!-- <div v-show="true"> -->
                        <div class="inner">
                            <div class="ribbon">
                                <a
                                    @click="getArticleByMenuId(item.id)"
                                    itemprop="url"
                                    :title="item.name"
                                    data-pjax-state=""
                                >
                                    {{ item.name }}
                                </a>
                            </div>
                            <ul class="posts">
                                <li
                                    v-for="(
                                        child, childIndex
                                    ) in item.children.slice(0, 6)"
                                    :key="childIndex"
                                    @click="getArticleByMenuId(child.id)"
                                >
                                    <a :title="child.name">
                                        {{ child.name }}
                                    </a>
                                </li>
                            </ul>
                            <div class="meta-footer">
                                <span>2 个子项，38 篇文章</span>
                            </div>
                        </div>
                        <!-- 在右下角添加的 a 标签 -->
                        <a
                            class="corner-link"
                            @click="getArticleByMenuId(item.id)"
                        >
                            more...
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "menu-image",
    props: ["contentList"],
    data() {
        return {};
    },
    created() {},
    methods: {
        // 文章列表
        getArticleByMenuId(id) {
            this.$router.push({ path: `/menu-article/${id}` });
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/menu-image.scss";
</style>
